<template>
    <div>
        <el-row>
            <el-col :span="3">序号</el-col>
            <el-col :span="5">课程编号</el-col>
            <el-col :span="8">课程名称</el-col>
            <el-col :span="8">学分</el-col>
        </el-row>
        <el-row v-for="(c,i) in courses" :key="c.id">
            <el-col :span="3">{{ i + 1 }}</el-col>
            <el-col :span="5">{{ c.id }}</el-col>
            <el-col :span="8">{{ c.name }}</el-col>
            <el-col :span="8">{{ c.credict }}</el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'CourseList' ,
    data(){
        return {
            courses: [
                { id: 1234 , name: 'Vue' , credict: 2 } ,
                { id: 1122 , name: 'HTML' , credict: 2 } ,
                { id: 2233 , name: 'JavaScript' , credict: 4 } 
            ]
        }
    },
    // 生命周期钩子: beforeCreate
    beforeCreate(){
        console.log( 'beforeCreate: ' , this.courses );
    },
    // 生命周期钩子: created
    // 适用于导航完成后获取数据 ( 数据获取 )
    created(){
        console.log( 'created' , this.courses );
    },
    // 导航守卫: 组件内的守卫(beforeRouteEnter)，在渲染该组件的对应路由被验证前调用
    // 不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
    // 适用于在导航完成前获取数据 ( 数据获取 )
    beforeRouteEnter(to,from,next){
        console.log( "CourseList组件内守卫(beforeRouteEnter):" );
        console.log( `\t从 ${ from.path } 来到 ${ to.path }` );
        console.log( `\t${this}` );
        let callback = vm => console.log( 'next: ' , vm.courses ) ;
        next( callback );
    },
    // 导航守卫: 组件内的守卫(beforeRouteLeave): 在导航离开渲染该组件的对应路由时调用
    beforeRouteLeave(to,from){
      console.log( "CourseList组件内守卫(beforeRouteLeave): to = " , to.path );
      console.log( "CourseList组件内守卫(beforeRouteLeave): from = " , from.path );
    }
}
</script>

<style>

</style>